<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单验证</title>
</head>

<body>
    <form id="login" action="" method="post">
        用户名：<input type="text" placeholder="写邮箱" /><span class="inf"></span><br />
        手机：<input type="text" placeholder="写手机" /><span class="inf"></span><br />
        <input type="checkbox" name="" id="keep">7天免登陆<br />
        <!-- 密码：<input type="text" placeholder="密码" /><span class="inf"></span><br /> -->
        <input type="button" value="登陆" id="loginbtn" />
    </form>
</body>
    <script src="../common.js"></script>
    <script>
        (function() {

            //找节点
            var login = document.getElementById('login');
            var inputs = login.querySelectorAll('input');
            var infs = login.querySelectorAll('.inf');
            var keep = document.getElementById('keep');
            var loginbtn = document.getElementById('loginbtn');
            var isok1 = false;
            var isok2 = false;

            //点击登陆的时候，根据复选框的状态来觉得是否保留7天
            loginbtn.onclick = function() {
                var mail = inputs[0].value;
                var tel = inputs[1].value;
                // console.log(keep.checked);
                if(keep.checked) {
                    //勾选的：把数据存在cookie并保留7天
                    setCookie('main',mail,7);
                    setCookie('tel',tel,7);
                }

            }

            //免登陆
            inputs[0].value = getCookie('main');
            inputs[1].value = getCookie('tel');

            /*
                需求：表单验证
                    * 验证表单的内容要符合一定的规则
                
                知识点：正则的方法  正则.test(字符串),返回布尔值
                    * 测试正则表达式用test方法,返回布尔值
                        格式：正则表达式.test(字符串)
                        用<正则表达式>测试<字符串>是否匹配,返回true/false
                    * 测试正则表达式exec方法:返回满足条件的数据，不满足返回null
                        /xx/.exec(字符串)
            */

            //验证邮箱：失去焦点的时候验证
            inputs[0].onblur = function() {
                //1、非空验证
                var mail = inputs[0].value.trim();
                if(mail) {
                    //非空
                    //2、正则验证
                    var reg = /^[\w\-%!]+@[\w\-%!]+\.[a-zA-Z]+$/;//邮箱的正则
                    var res = reg.test(mail);
                    // var res3 = reg.exec(mail);
                    // console.log(res3);
                    if(res) {
                        //真：验证通过
                        infs[0].innerHTML = '邮箱验证通过';
                        infs[0].style.color = '#58bc58';
                        isok1 = true;
                        //3.正确性验证：ajax把数据传给后端，后端查询数据库看是否匹配
                    }else{
                        //假：验证失败
                        infs[0].innerHTML = '邮箱格式错误';
                        infs[0].style.color = 'red';
                        isok1 = false;
                    }
                    // console.log(res);
                }else{
                    //空
                    infs[0].innerHTML = '请输入邮箱地址';
                    infs[0].style.color = 'red';

                }
            }

            //验证手机
            inputs[1].onblur = function() {
                //1、非空验证
                var tel = inputs[1].value.trim();
                if(tel) {
                    //非空
                    //2、正则验证
                    var reg = /^1[3-9]\d{9}$/;//手机的正则
                    var res = reg.test(tel);

                    // var res3 = reg.exec(mail);
                    // console.log(res3);
                    if(res) {
                        //真：验证通过
                        infs[1].innerHTML = '手机验证通过';
                        infs[1].style.color = '#58bc58';
                        isok2 = true;
                        //3.正确性验证：ajax把数据传给后端，后端查询数据库看是否匹配
                    }else{
                        //假：验证失败
                        infs[1].innerHTML = '手机格式错误';
                        infs[1].style.color = 'red';
                        isok2 = false;
                    }
                    // console.log(res);
                }else{
                    //空
                    infs[1].innerHTML = '请输入手机号码';
                    infs[1].style.color = 'red';

                }
            }

            //密码长度：6-18

            //点击提交：
            inputs[3].onclick = function() {
                //上面的两个正则都要验证通过才能提交跳转
                if(isok1 && isok2) {
                    alert('成功登陆跳转');
                }else{
                    alert('登陆失败');
                }
            }

        })();
    </script>
</html>